<template>
  <div class="workflow-container">
    <el-row class="tool-bar">
      <el-col :span="13" :offset="2">
        <i class="el-alert__icon el-icon-warning text-warning" />
        <span class="text-warning ">流程发布后再次保存将会创建一个新版本的流程，不启用流程将会按旧版本的流程流转</span>
      </el-col>
      <el-col :span="4">
        <el-dropdown>
          <span class="el-dropdown-link">
            流程版本
            <span class="text-warning">V{{ selectedDesignProcess.version }}</span>
            <el-tag :type="selectedDesignProcess.status=='2'?'success':'warning'">{{
              selectedDesignProcess.status == '2' ? '启用' : '设计'
            }}</el-tag>
            <i class="el-icon-arrow-down el-icon--right" />
          </span>
          <el-dropdown-menu slot="dropdown">
            <el-dropdown-item v-for="d in designList" :key="d.id"
                              :command="d.id" class="m4"
            >
              流程版本
              <span class="text-warning mr5">V{{ d.version }}</span>
              <el-tag :type="d.status=='2'?'success':'warning'">
                {{ d.status == '2' ? '启用' : '设计' }}
              </el-tag>
            </el-dropdown-item>
          </el-dropdown-menu>
        </el-dropdown>
      </el-col>
      <el-col :span="4">
        <el-button class="mt10" icon="el-icon-check" @click="saveBusinessDesign">
          保存
        </el-button>
        <el-button class="mt10" icon="el-icon-s-check" type="success" @click="downloadBpmnFile">
          下载BPMN
        </el-button>
        <el-button class="mt10" icon="el-icon-s-check" type="danger" @click="publishProcess">
          启用
        </el-button>
      </el-col>
    </el-row>
    <div class="fd-nav-content">
      <section class="dingflow-design">
        <div class="zoom">
          <div :class="'zoom-out'+ (nowVal==50?' disabled':'')" @click="zoomSize(1)" />
          <span>{{ nowVal }}%</span>
          <div :class="'zoom-in'+ (nowVal==300?' disabled':'')" @click="zoomSize(2)" />
        </div>
        <div id="box-scale" :style="'transform: scale('+nowVal/100+'); transform-origin: 50% 0px 0px;'"
             class="box-scale"
        >
          <nodeWrap :is-tried.sync="isTried"
                    :process-node.sync="processNode"
          />
          <div class="end-node">
            <div class="end-node-circle" />
            <div class="end-node-text">
              流程结束
            </div>
          </div>
        </div>
      </section>
    </div>
    <div class="workflow-drawer">
      <approverDrawer :form-key="formKey" />
      <copyerDrawer :form-key="formKey" />
      <conditionDrawer :form-key="formKey" />
    </div>
  </div>
</template>

<script>
import {defaultProcessData} from './defaultProcess'
import {
  convertBpmnRequest,
  getBusinessDesignListRequest,
  publishBusinessDesignRequest,
  saveBusinessDesignRequest
} from "@/api/workflow/workflow"
import nodeWrap from "./nodeWrap"
import approverDrawer from './drawer/approverDrawer'
import conditionDrawer from './drawer/conditionDrawer'
import copyerDrawer from './drawer/copyerDrawer'
import {getProjectRequest} from "../../../api/project/form"
import {jsonSimpleClone} from "../../../utils"


export default {
  name: "FormWorkFLow",
  components: {
    nodeWrap,
    approverDrawer,
    conditionDrawer,
    copyerDrawer
  },
  data() {
    return {
      // 流程设计列表
      designList: [],
      // 选中设计列表
      selectedDesignProcess: {
        version: 1,
        status: 1
      },
      isTried: false,
      nowVal: 100,
      processConfig: {},
      processNode: {},
      process: {},
      directorMaxLevel: 0,
      formKey: ""
    }
  },
  created() {
    this.formKey = this.$route.query.key
    this.getBusinessDesignList()
  },
  methods: {
    /**
     * 大小缩放
     * @param type
     */
    zoomSize(type) {
      if (type == 1) {
        if (this.nowVal == 50) {
          return
        }
        this.nowVal -= 10
      } else {
        if (this.nowVal == 300) {
          return
        }
        this.nowVal += 10
      }
    },
    getBusinessDesignList() {
      getBusinessDesignListRequest(this.formKey).then((res) => {
        this.designList = res.data
        let processData = JSON.parse(JSON.stringify(defaultProcessData))
        if (res.data && res.data[0]) {
          this.selectedDesignProcess = res.data[0]
          processData = this.selectedDesignProcess.scheme
        }
        this.processConfig = processData
        let {processNode, directorMaxLevel, process} = processData
        getProjectRequest(this.formKey).then((res) => {
          process.name = res.data.name
        })
        process.processId = 'process' + this.formKey
        this.processNode = processNode
        this.directorMaxLevel = directorMaxLevel
        this.process = process
      })
    },
    saveBusinessDesign() {
      let data = {
        ...JSON.parse(JSON.stringify(this.selectedDesignProcess)),
        name: this.process.name,
        scheme: this.processConfig,
        formKey: this.formKey
      }
      saveBusinessDesignRequest(data).then((res) => {
        if (res.data) {
          this.msgSuccess('保存成功')
          this.getBusinessDesignList()
        }
      })
    },
    downloadBpmnFile() {
      let workflow = jsonSimpleClone(this.processConfig)
      // workflow.processNode = workflow.processNode
      convertBpmnRequest(JSON.stringify(workflow)).then((res) => {
        const content = res.data
        const blob = new Blob([content])
        const elink = document.createElement('a')
        elink.download = workflow.process.name + ".bpmn"
        elink.style.display = 'none'
        elink.href = URL.createObjectURL(blob)
        document.body.appendChild(elink)
        elink.click()
        URL.revokeObjectURL(elink.href) // Release the URL object
        document.body.removeChild(elink)
      })
    },
    publishProcess() {
      let data = {
        ...JSON.parse(JSON.stringify(this.selectedDesignProcess)),
        scheme: this.processConfig,
        name: this.process.name,
        formKey: this.formKey
      }
      publishBusinessDesignRequest(data).then((res) => {
        if (res.data) {
          this.msgSuccess('发布成功')
          this.getBusinessDesignList()
        }
      })
    }
  }
}
</script>

<style>
@import "./workflow.css";

.error-modal-list {
  width: 455px;
}
</style>

